<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="home/public/head::head(~{::title},~{},~{})">
    <title>收货地址-答题吧</title>
</head>
<body style="padding: 20px 20px;">
<div id="addressListApp" v-cloak>
    <div class="layui-row">
        <table class="layui-table layui-form">
            <colgroup>
                <col>
                <col>
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>ID</th>
                <th>收货人姓名</th>
                <th>收货人电话</th>
                <th>收货地址</th>
                <th>创建时间</th>
                <th>选择</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in addressList">
                <td>{{item.id}}</td>
                <td>{{item.userName}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.province| getAddressByCode(item.city,item.area)}} {{item.detial}}</td>
                <td>{{item.createTime}}</td>
                <td><input type="radio" name="addressId" :value="item.id" class="layui-table-link"/></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12 text-right">
            <button id="chooseBtn" class="layui-btn">确定</button>
            <button id="cancelBtn" class="layui-btn layui-btn-normal">取消</button>
        </div>
    </div>
</div>
<script th:src="@{/static/common/plugs/address/data.js}"></script>
<script th:src="@{/static/common/plugs/vue/vue.js}"></script>
<script th:inline="javascript">

    var layer;
    layui.use(['layer'], function (r) {
        layer = layui.layer;
    });

    var that = this;
    var app = new Vue({
        el: "#addressListApp",
        data: {
            addressList: null
        },
        //过滤器
        filters: {
            /**
             * 根据地区代码查询地名
             */
            getAddressByCode: function (provinceCode, cityCode, areaCode) {
                var address = "";
                $.each(that.threeSelectData, function (k1, v1) {
                    if (v1.val === provinceCode) {
                        $.each(v1.items, function (k2, v2) {
                            if (v2.val === cityCode) {
                                $.each(v2.items, function (k3, v3) {
                                    if (v3 === areaCode) {
                                        address = k1 + ' ' + k2 + ' ' + k3;
                                    }
                                })
                            }
                        })
                    }
                });
                return address;
            }
        }
    });

    //注意：parent 是 JS 自带的全局对象，可用于操作父页面
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    //给父页面传值
    $('#chooseBtn').on('click', function () {
        var addressId = $("input[name='addressId']:checked").val();
        if (addressId == null || addressId === '') {
            parent.layer.msg('请选择地址！', {time: 1500});
            return;
        }
        $.get("/home/address/queryAddressById/" + addressId, function (res) {
            var address = res.data;
            //根据地址代码获取地址的名称和code对象
            var addressItem = getAddressNameByCode(address.province, address.city, address.area);
            address.province = addressItem.province;
            address.city = addressItem.city;
            address.area = addressItem.area;
            //将选择的地址赋值给父页面的变量
            parent.address = address;
            //调用父页面的方法刷新收货地址的显示
            parent.changeAddressSelect(address);
        });
        //关闭当前页面
        parent.layer.close(index);
    });

    /**
     * 获取自己的地址列表
     */
    function getMyAddressList() {
        $.post("/home/address/queryAddressListByUserId/" + [[${session.user.id}]], function (res) {
            console.log(res);
            app.$data.addressList = res.data;
        })
    }

    /**
     * 根据地区代码查询地名
     */
    function getAddressNameByCode(provinceCode, cityCode, areaCode) {
        var address = {};
        $.each(threeSelectData, function (k1, v1) {
            if (v1.val === provinceCode) {
                $.each(v1.items, function (k2, v2) {
                    if (v2.val === cityCode) {
                        $.each(v2.items, function (k3, v3) {
                            if (v3 === areaCode) {
                                address = {
                                    province: {name: k1, code: v1.val},
                                    city: {name: k2, code: v2.val},
                                    area: {name: k3, code: v3}
                                };
                            }
                        })
                    }
                })
            }
        });
        return address;
    }

    getMyAddressList();

    /*取消按钮*/
    $('#cancelBtn').on('click', function () {
        parent.layer.close(index);
    });
</script>

</body>
</html>
